// import { useState } from 'react'
// import axios from 'axios'
// // 如果不想这么麻烦导入，可以直接 const SIZE = 1* 1024 * 1024
// export default function useUpload() {
//   const [files, setFiles] = useState()
//   const handleFileChange = (e) => {
//     const [file] = e.target.files
//     setFiles(file)
//   }
//   // 生成文件切片
//   const createFileChunk = (file, size = 1*1024*1024) => {
//     // 临时存储文件的切片的数组，里面是一个一个的切片数据
//     const fileChunkList = []
//     // 表示从0的位置开展切片，每一个片的大小和你的SIZE设置有关系
//     let cur = 0
//     while (cur < file.size) {
//       // 每进行一次循环，都会把切片放进临时数组
//       fileChunkList.push({ file: file.slice(cur, cur + size) })
//       // 每次循环都会更新起始位置，最终会等于文件的大小，然后退出循环
//       cur += size
//     }
//     return fileChunkList
//   }
//   // 合并请求
//   const mergeRequest = async () => {
//     console.log(2)
//     const data = { size: SIZE, filename: files.name }
//     await axios.post('http://127.0.0.1:8000/merge', data)
//   }

//   // 上传切片
//   const uploadChunks = async (newFileChunkList) => {
//     // 对文件进行循环，提取出我们需要的值，chunk，hash， files.name
//     // hash的作用是后续服务端需要根据hash值来拼接
//     const requestList = newFileChunkList
//       .map(({ chunk, hash }) => {
//         console.log(1)
//         const formData = new FormData()
//         formData.append('chunk', chunk)
//         formData.append('hash', hash)
//         formData.append('filename', files.name)
//         return { formData }
//       })
//       .map(({ formData }) => {
//         return axios.post('http://127.0.0.1:8000/upload', formData)
//       })
//     // 并发请求
//     await Promise.all(requestList)
//     // 合并切片请求
//     await mergeRequest()
//   }
//   const handleUpload = async () => {
//     if (!files) return
//     const fileChunkList = createFileChunk(files)
//     const newFileChunkList = fileChunkList.map(({ file }, index) => {
//       return { chunk: file, hash: files.name + '-' + index }
//     })
//     await uploadChunks(newFileChunkList)
//   }

//   return {
//     handleFileChange,
//     handleUpload,
//   }
// }
import React, { useState } from 'react';
import instance from '../http/instance'

const FileUploader = () => {
    // 定义一个状态变量selectedFile，用于存储用户选择的文件
    const [selectedFile, setSelectedFile] = useState(null);
    // 定义一个函数handleFileChange，用于处理文件选择事件
    const handleFileChange = (event) => {
        setSelectedFile(event.target.files[0]);
    };
    // 定义一个函数handleUpload，用于处理文件上传事件
    const handleUpload = () => {
        // 切片上传
        const file = selectedFile;
        // 计算文件总大小和切片大小
        const chunkSize = 1024 * 1024; // 切片大小，这里设置为1MB
        // 计算文件总切片数量
        const totalChunks = Math.ceil(file.size / chunkSize);
        const chunks = [];// 存储文件切片的数组
        // 生成文件切片
        for (let i = 0; i < totalChunks; i++) {
            const start = i * chunkSize;
            const end = Math.min(start + chunkSize, file.size);
            const chunk = file.slice(start, end);
            chunks.push(chunk);
        }
        // 上传文件切片
        uploadChunks(chunks);
    };

    const uploadChunks = (chunks) => {
        // 上传文件切片
        const filename = selectedFile.name;
        const totalChunks = chunks.length;
        let uploadedChunks = 0;
        chunks.forEach((chunk, index) => {
            const formData = new FormData();
            formData.append('file', chunk);
            formData.append('filename', filename);
            formData.append('index', index);
            instance.post('http://localhost:8000/upload', formData)
                .then(response => {
                    uploadedChunks++;
                    console.log(`Chunk ${index + 1} uploaded successfully`);
                    if (uploadedChunks === totalChunks) {
                        mergeChunks();
                    }
                })
                .catch(error => {
                    console.error(`Error uploading chunk ${index + 1}:`, error);
                });
        });
    };
    const mergeChunks = () => {
        const filename = selectedFile.name;
        instance.post('http://localhost:8000/upload', { filename })
            .then(response => {
                console.log('File merged successfully');
            })
            .catch(error => {
                console.error('Error merging file:', error);
            });
    };
    return (
        <div>
            <input type="file" onChange={handleFileChange} style={{ marginLeft: '0.8rem', marginTop: '0.5rem' }} />
            <button onClick={()=>{
                if(selectedFile){
                    handleUpload();
                }else{
                    alert('请选择文件');
                }
            }}>上传文件</button>
        </div>
    );
};

export default FileUploader;